<template>
	<view class="view">
		<view class="cu-bar search bg-white">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input :adjust-position="false" v-model="search.text" type="text" placeholder="请输入区域/楼盘/位置" confirm-type="search" />
			</view>
			<view class="action"><button class="cu-btn bg-green shadow-blur round" @tap="searchSubmit">搜索</button></view>
		</view>
		<view class="address-loc">
			<view class="address-loc-title">
				<u-icon name="map" color="#FA8513" size="28"></u-icon>
				<text>{{place}}</text>
			</view>
		</view>
		<view class="news-li">
			<view class="new-content">
				<text>{{ locAddress || '未获取到您的地址' }}</text>
			</view>
		</view>
		<view class="address-loc">
			<view class="address-loc-title"><text>#</text></view>
		</view>

		<view class="news-li"  @click="tapSqAddress()">
			<view>市区</view>
			<view class="new-content"><text>找不到所在小区，市区的房源请选择市区</text></view>
		</view>
		<view class="news-li"  @click="tapXzAddress()">
			<view>乡镇</view>
			<view class="new-content"><text>找不到所在小区，乡镇的房源请选择乡镇</text></view>
		</view>

		<view class="address-loc">
			<view class="address-loc-title">
				<u-icon name="list" color="#FA8513" size="28"></u-icon>
				<text>地址列表</text> 
			</view>
		</view>
		<view class="news-li" v-for="(poi, index) in list" :key="index" @click="tapAddress(poi)">
			<view>{{ poi.name }}</view>
			<view class="new-content">
				<text>{{ poi.address }}</text>
			</view>
		</view>
		<m-loading :loading="loading" :finished="finished"></m-loading>
	</view>
</template>

<script>
import mLoading from '@/components/m-loading.vue';
import listMixin from '@/common/mixins/list-mixin.js';
export default {
	mixins: [listMixin],
	components: { mLoading },

	data() {
		return {
			lat: '',
			lon: '',
			place: '',
			locAddress: '',
			province: '',
			city: '',
			district: '',
			list: [], //列表必须为key list的数组
			search: {
				//搜索对象必须为key search的对象
				text: '',
				arr: [1, 2, 3]
			}
		};
	},
	onLoad(option) {
		let that = this;
		this.province = this.$Route.query.province;
		this.city = this.$Route.query.city;
		this.district = this.$Route.query.district;
		this.lat = this.$Route.query.lat;
		this.lon = this.$Route.query.lon;
		this.place = '';
		if (this.$Route.query.province != '[]') {
			this.place = this.$Route.query.province;
		}
		if (this.$Route.query.city != '[]') {
			this.place += '-' + this.$Route.query.city;
		}
		if (this.$Route.query.district != '[]') {
			this.place += '-' + this.$Route.query.district;
		}
		uni.request({
			url: 'http://www.mksoft.cn/zx/front/gaode/coordinateConvert', //接口地址
			data: {
				lat: this.lat,
				lon: this.lon,
				needPois: "1"
			},
			success: res => {
				if (res.data.code == 200) {
					if (res.data.adcode != '[]') {
						// 获取到了定位
						that.list = res.data.data.poiList;
						that.locAddress = res.data.data.addressName;
					}
				}
			},
			fail: res => {
				console.log('经纬度转换fail-----', res);
			}
		});
	},

	methods: {
		tapAddress(poi){
			uni.setStorageSync('myAddress',poi)
			uni.navigateBack({
			    delta: 1
			});
		},
		tapSqAddress(){
			uni.setStorageSync('myAddress',{name:"市区房源",address:"市区"})
			uni.navigateBack({
			    delta: 1
			});
		},
		tapXzAddress(){
			uni.setStorageSync('myAddress',{name:"乡镇房源",address:"郊区"})
			uni.navigateBack({
			    delta: 1
			});
		},
		// 搜索
		searchSubmit() {
			// 调用混合搜索
			this._searchData();
		},
		// 模拟后端分页
		getData(requestParams) {
			let self = this;
			return new Promise((res, rej) => {
				let params = requestParams;
				if (!params) {
					params = {
						page: 1,
						size: 10,
						search: {}
					};
				}
				console.log(params);
				setTimeout(() => {
					let arr = [];
					for (let i = (params.page - 1) * params.size; i < params.page * params.size; i++) {
						arr.push({
							id: i,
							title: '【新增' + i + '】 标题',
							content: '搜索对象为' + JSON.stringify(params.search)
						});
					}
					res({
						code: 200,
						data: {
							page: params.page,
							size: params.size,
							list: arr,
							total: 20 // 设置20就加载完成
						}
					});
				}, 500);
			});
		},
		// 数据请求(没错就是这么少的代码)
		async _getList() {
			// 根据实际情况修改自己修改key
			let result = await this.getData({
				page: this.page, // 传入页码
				size: this.size, // 传入每页条数
				search: this.search // 传入搜索的对象
			});
			let self = this;
			this.total = result.data.total;
			result.data.list.map(item => {
				self.list.push(item);
			});
		}
	}
};
</script>

<style>
@import '@/common/colorui/main.css';
@import '@/common/colorui/icon.css';
.address-loc {
	width: 100%;
	background-color: #f7f7f7;
}
.address-loc-title {
	padding-left: 16px;
	padding-top: 10rpx;
	padding-bottom: 10rpx;
}
/*说明*/
.notice {
	font-size: 30upx;
	padding: 40upx 0;
	border-bottom: 1upx solid #eee;
	text-align: center;
}
/*展示上拉加载的数据列表*/
.news-li {
	font-size: 30upx;
	padding: 25upx;
	border-bottom: 1upx solid #eee;
	color: $uni;
}
.news-li .new-content {
	font-size: 28upx;
	margin-top: 10upx;
	margin-left: 20upx;
	color: #666;
}
</style>
